<template>
    <section class="budget-schedule">
        <el-form ref="budgetSchedule" :model="budgetSchedule" :rules="rules" label-position="right" label-width="115px">
            <el-form-item label="单日预算" prop="budgetLimit">
                <el-row>
                    <el-form-item prop="budgetLimit" style="display: inline-block">
                        <el-input class="prepandSign" v-model.number="budgetSchedule.budgetLimit" @blur="budgetBlur" ></el-input>
                    </el-form-item>
                    <span v-show="budgetSchedule.budgetLimit < 6" class="form-item-tip">&nbsp;&nbsp;（FB单广告预算不得低于<span class="color-red">￥6.00</span>）</span>
                </el-row>
            </el-form-item>
            <el-form-item label="排期" prop="date">
                <el-date-picker @change="handleDateChange" :picker-options="startDateOptions" placeholder="开始时间 ~ 结束时间"
                                v-model="budgetSchedule.date" type="daterange">
                </el-date-picker>
                <span class="form-item-tip">&nbsp;&nbsp;（北京时间）</span>

            </el-form-item>
            <el-form-item label="竞价金额：">
                <div>
                    <el-button-group class="switch-btn-group">
                        <el-button :disabled="adverPlan == '品牌知名度'" @click="budgetSchedule.bidAmount = true;$store.commit('STEP_CLICKCOST',{data: 0})" :class="{'switch-avtive': budgetSchedule.bidAmount}">自动</el-button>
                        <el-button :disabled="adverPlan == '品牌知名度'" @click="budgetSchedule.bidAmount = false;clickCostBlur()" :class="{'switch-avtive': !budgetSchedule.bidAmount}">手动</el-button>
                    </el-button-group>
                    <span v-show="budgetSchedule.bidAmount" class="form-item-tip bidAmount-tip">&nbsp;&nbsp;让平台为你设置竞价，以最优价格获得最多成效</span>
                </div>
                <div v-if="adverPlan == '品牌知名度'" class="form-item-tip">广告目标为品牌知名度的时候只支持自动竞价</div>
                <div v-if="!budgetSchedule.bidAmount">
                    <el-form-item class="click-cost-wraper" prop="clickCost"
                                  :rules="[{required: true, message: '请输入金额'}]">
                        <span class="click-cost-label">默认出价：</span>
                        <el-input class="click-cost prepandSign" v-model.number="budgetSchedule.clickCost" @blur="clickCostBlur" placeholder="00.00"></el-input>
                        <!--<span class="form-item-tip">&nbsp;&nbsp;建议竞价：￥<span class="color-red">{{budgetAmount.amountMedian | bidAmountFormat}}</span>CNY ( ￥{{budgetAmount.amountMin | bidAmountFormat}}-￥{{budgetAmount.amountMax | bidAmountFormat}} )</span>-->
                    </el-form-item>
                </div>

            </el-form-item>
            <div class="advance-setting">
                <div class="bs-title"><span class="label">高级设置：</span><el-switch v-model="showMoreSetting" on-text="" off-text="" ></el-switch></div>
                <div v-show="showMoreSetting" class="bs-container">
                    <!--<el-form-item label="广告优化方式：">
                        <el-row>
                            <el-col :span="6">
                                <el-select v-model="budgetSchedule.optimizeWays" @change="changeOptimizeWays" class="advance-select" placeholder="请选择">
                                    <el-option v-for="item in switchOptimizeWays()" :key="item.id"  :value="item"></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item label="计费方式：">
                        <span v-if="budgetSchedule.optimizeWays === ''" class="form-item-tip">请先选择广告优化方式</span>
                        <el-radio-group v-model="budgetSchedule.chargeType">
                            <el-radio v-for="item in chargetypeOption" :key="item.id" :label="item"></el-radio>
                        </el-radio-group>
                    </el-form-item>-->
                    <el-form-item label="投放时间：">
                        <div>
                            <el-button-group class="switch-btn-group">
                                <el-button @click="budgetSchedule.publishTime = true" :class="{'switch-avtive': budgetSchedule.publishTime}">全天投放广告</el-button>
                                <el-button @click="budgetSchedule.publishTime = false" :class="{'switch-avtive': !budgetSchedule.publishTime}">分时段投放</el-button>
                            </el-button-group>
                        </div>
                        <div v-show="!budgetSchedule.publishTime" class="time-division-wraper">
                            <div class="td-hours">
                                <ul>
                                    <li>00</li>
                                    <li>03</li>
                                    <li>06</li>
                                    <li>09</li>
                                    <li>12</li>
                                    <li>15</li>
                                    <li>18</li>
                                    <li>21</li>
                                </ul>
                            </div>
                            <div class="td-weekDay">
                                <ul>
                                    <li>星期一</li>
                                    <li>星期二</li>
                                    <li>星期三</li>
                                    <li>星期四</li>
                                    <li>星期五</li>
                                    <li>星期六</li>
                                    <li>星期日</li>
                                </ul>
                            </div>
                            <div class="td-container">
                                <div v-for="item in timeDivision" :key="item.id" class="td-cell" @click="handleSelect(item)" :class="{active: item.selected}"></div>
                            </div>
                            <div class="td-everyday">
                                <span class="td-everyday-label">每天</span>
                                <div class="td-everyday-con">
                                    <div v-for="item in allDayHour" :key="item.id" class="td-cell" @click="selectedAllTheSameHour(item)" :class="{active: item.selected}"></div>
                                </div>
                            </div>
                            <div class="td-tips">
                                <div style="color: #666"><span class="td-tips-icon"></span> 已排期时段</div>
                                <div >分时间段投放将会按照投放位置的时间段展示广告</div>
                            </div>
                        </div>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="广告组名称" prop="adsName">
                <el-input v-model="budgetSchedule.adsName" :maxlength="50" class="lengthLimit bs-adsprefix"></el-input><span class="stringCount">{{nowLength}}</span>
            </el-form-item>
            <el-form-item  v-if="type == 'new'" label="">
                <el-button @click="nextStep" class="bd-next-btn" type="primary">下一步</el-button>
            </el-form-item>

            <el-form-item  v-if="type == 'edit'" label="" style="padding-top:10px;">
                <!-- <nuxt-link :to="{ path: '/manager/facebook/ads-group', query: { }}"> -->
                    <div @click="goBack" class="btn_common_grey" style="line-height:18px;margin-right:15px;">取消</div>
                <!-- </nuxt-link> -->
                <div @click="editAdGroup" class="btn_common_yellow" style="line-height:18px;">保存</div>
            </el-form-item>

        </el-form>
        <loading :customClass="createLoading" v-show="showLoading" />
    </section>
</template>

<script>
    import Vue from 'vue'
    import { Row,Col,Button,ButtonGroup,Input,Switch,Form,FormItem,Select,Option,Radio,RadioGroup,RadioButton,DatePicker,TimePicker,Message } from 'element-ui'
    import {charCodeLen} from '~/assets/js/global.js'

    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Button)
    Vue.use(ButtonGroup)
    Vue.use(Switch)
    Vue.use(Input)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(RadioButton)
    Vue.use(DatePicker)
    Vue.use(TimePicker)

    import ToggleButton from '~/components/toggleButton.vue'
    import { mapGetters, mapMutations} from 'vuex';
    import { getDate,toDecimal2 } from '~/assets/js/global'
    import loading from '~/components/loading.vue'

    Vue.prototype.$message = Message;

    export default {
        components: {
            ToggleButton,
            loading
        },
        props:{
            'type' : {//判断是编辑还是新增new / edit
                default:'new'
            }
        },
        data () {
            return {
                showLoading: false,
                createLoading: '',
                startDateOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                endDateOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                budgetSchedule: {
                    /*budgetType: '单日预算',
                    schedule: '长期投放',*/
                    budgetLimit: '6.00',
                    date: [],
                    startTime: '',
                    endTime: '',
                    optimizeWays: '',
                    chargeType: '展示次数',
                    bidAmount: true,
                    clickCost: '0.00',
                    publishTime: true,
                    timeQuantumList: [],
                    adsName: ''
                },
                rules: {
                    /*budgetType: [{ required: true, message: '请选择预算类型', trigger: 'change' }],
                    schedule: [{ required: true, message: '请选择排期方式', trigger: 'blur' }],*/
                    budgetLimit: [
                        { required: true, message: '请输入预算金额',}
                    ],
                    date: [{ required: true, message: '请选择排期'}],
                    adsName: [{ required: true, message: '请输入广告组名称', trigger: 'blur' }]
                },
                scheduleDays: 30,
                estimateBudget: 1900,
                showMoreSetting: false,
                timeDivision: [],
                allDayHour: [],
                selectedTD: [],
                chargetypeOption: [],
                localId: '',
                platFormId: '',
                stepCreated: false,
                adGroupStatus: null,
                target: null,
                nowLength: 50
            }
        },
        computed: {
            ...mapGetters([
                'adverPlan',
                'editAudienceForm',
                'budgetAmount',
                "adverLayout"
            ])
        },
        filters: {
            bidAmountFormat(val){
                return toDecimal2(val)
            }
        },
        methods: {
            //自动名称
            autoAdverName(){
                let time = new Date();
                let year = (time.getFullYear()+"").substr(2,2);
                let month = (time.getMonth()+1)<10?"0"+(time.getMonth()+1):(time.getMonth()+1)+"";
                let day = time.getDate()<10?"0"+time.getDate():time.getDate()+"";
                let hour = time.getHours()<10?"0" + time.getHours() : time.getHours();
                let minu = time.getMinutes()<10?"0" + time.getMinutes() : time.getMinutes();
                this.budgetSchedule.adsName = year+month+day+hour+minu+'-广告组';
                return year+month+day+hour+minu+'-广告组';
            },
            setDefaultSchedule () {
                if(!this.budgetSchedule.date.length){
                    let d = new Date();
                    d.setDate(d.getDate());
                    this.budgetSchedule.startTime = d.getTime();
                    this.budgetSchedule.date.push(new Date(getDate(d)));
                    d.setDate(d.getDate()+30);
                    this.budgetSchedule.endTime = d.getTime();
                    this.budgetSchedule.date.push(new Date(getDate(d)))
                }
            },
            handleDateChange () {
                if(!this.budgetSchedule.date[0]) return false;
                this.budgetSchedule.startTime = this.budgetSchedule.date[0].getTime();
                this.budgetSchedule.endTime = this.budgetSchedule.date[1].getTime();
                if(this.budgetSchedule.startTime == this.budgetSchedule.endTime || this.budgetSchedule.date[1].getHours() == 0) {
                    this.budgetSchedule.endTime += (23*60*60 + 59*60 + 59) * 1000
                }

            },
            //初始化时间段表格
            initTimeDivision () {
                //周一~周日
                for (let i=1;i<7;i++) {
                    for (let j=0;j<24;j++) {
                        let item = {};
                        item.selected = false;
                        item.day = i;
                        item.hour = j;
                        this.timeDivision.push(item)
                    }
                }
                //周日为：0
                for (let i=0;i<1;i++) {
                    for (let j=0;j<24;j++) {
                        let item = {};
                        item.selected = false;
                        item.day = i;
                        item.hour = j;
                        this.timeDivision.push(item)
                    }
                }
                //全选表格
                for (let k=0;k<24;k++) {
                    let item = {day: 0,selected: false,selectNum:0};
                    item.hour = k;
                    this.allDayHour.push(item);
                    this.budgetSchedule.timeQuantumList.push({
                        "start": k*60,
                        "end": k*60+60,
                        "days": []
                    })
                }
            },
            //全选事件
            selectedAllTheSameHour (item) {
                item.selected = !item.selected;
                for (let i=0;i<7*24;i++) {
                    if(this.timeDivision[i].hour === item.hour){
                        this.timeDivision[i].selected = item.selected
                    }
                }
                item.selectNum = item.selected ? 7 : 0;
                this.budgetSchedule.timeQuantumList[item.hour].days = item.selected ? [0,1,2,3,4,5,6] : []
            },
            //单选事件
            handleSelect (item) {
                item.selected = !item.selected;
                let a = this.allDayHour[item.hour].selectNum;
                this.allDayHour[item.hour].selectNum = item.selected ? a + 1 : a - 1;
                if (this.allDayHour[item.hour].selectNum === 7) {
                    this.allDayHour[item.hour].selected = true
                }
                else {
                    this.allDayHour[item.hour].selected = false
                }

                if (item.selected) {
                    this.budgetSchedule.timeQuantumList[item.hour].days.push(item.day)
                }else {
                    let arr = this.budgetSchedule.timeQuantumList[item.hour].days;
                    let len =  arr.length;
                    for(let i=0;i<len;i++) {
                        if(arr[i] == item.day){
                            this.budgetSchedule.timeQuantumList[item.hour].days.splice(i,1);
                            break;
                        }
                    }
                }
            },
            clickCostBlur() {
                if(isNaN(this.budgetSchedule.clickCost)){
                    this.budgetSchedule.clickCost = '0.00';
                    this.$message({
                        type: 'warning',
                        message: '请输入正确的数字金额'
                    });
                }else if(this.budgetSchedule.clickCost <= 0) {
                    this.budgetSchedule.clickCost = '0.00';
                    this.$message({
                        type: 'warning',
                        message: '出价金额必须大于￥0.00，请修改手动竞价金额！'
                    });
                }else {
                    this.budgetSchedule.clickCost = toDecimal2(this.budgetSchedule.clickCost);
                }
                this.$store.commit('STEP_CLICKCOST',{data: '￥' + this.budgetSchedule.clickCost});
            },
            budgetBlur() {
                if(isNaN(this.budgetSchedule.budgetLimit)){
                    this.budgetSchedule.budgetLimit = '6.00';
                    this.$message({
                        type: 'warning',
                        message: '请输入正确的数字金额'
                    });
                }else if(this.budgetSchedule.budgetLimit <= 6) {
                    this.budgetSchedule.budgetLimit = '6.00';
                    this.$message({
                        type: 'warning',
                        message: '单日预算金额最低￥6.00'
                    });
                }else {
                    this.budgetSchedule.budgetLimit = toDecimal2(this.budgetSchedule.budgetLimit);
                }
                this.$store.commit('STEP_BUDGET',{data: this.budgetSchedule.budgetLimit});

                /*if(parseFloat(this.budgetSchedule.budgetLimit) < 6) this.budgetSchedule.budgetLimit = '6.00';*/
            },
            switchOptimizeWays () {
                let optimizeWays = [];
                switch(this.adverPlan){
                    case '访问量': optimizeWays = ["网站链接点击量","展示次数","单日独立覆盖"];
                        break;
                    case '品牌知名度': optimizeWays = ["覆盖人数","品牌知名度"];
                        this.budgetSchedule.bidAmount = true;
                        break;
                    case '主页赞': optimizeWays = ["主页赞"];
                        break;
                }
                if(this.budgetSchedule.optimizeWays == ''){
                    this.budgetSchedule.optimizeWays = optimizeWays[0];
                    this.changeOptimizeWays()
                }
                //return optimizeWays
            },
            changeOptimizeWays(){
                switch(this.budgetSchedule.optimizeWays){
                    case '网站链接点击量': this.chargetypeOption = ["展示次数","链接点击量"];
                        break;
                    case '展示次数': this.chargetypeOption = ["展示次数"];
                        break;
                    case '单日独立覆盖': this.chargetypeOption = ["展示次数"];
                        break;
                    case '覆盖人数': this.chargetypeOption = ["展示次数"];
                        break;
                    case '品牌知名度': this.chargetypeOption = ["展示次数"];
                        break;
                    case '主页赞': this.chargetypeOption = ["展示次数","主页赞"];
                        break;
                }
                this.budgetSchedule.chargeType = this.chargetypeOption[0]
            },
            handleTimeShare(){
                if(!this.budgetSchedule.budgetType){
                    this.$message({
                        type: 'warning',
                        message: '请先选择单广告预算'
                    })
                }
                else if(this.budgetSchedule.budgetType === '总预算') {
                    this.budgetSchedule.publishTime = false
                }
                else {
                    this.$message({
                        type: 'warning',
                        message: '只有单广告预算为总预算才可以选择分时段投放'
                    })
                }
            },
            removeEmptyTime() {
                let tLen = this.budgetSchedule.timeQuantumList.length;
                let tArr = [];
                for (let i=0;i<tLen;i++) {
                    this.budgetSchedule.timeQuantumList[i].days.length ? tArr.push(this.budgetSchedule.timeQuantumList[i]) : false;
                }
                return tArr;
            },
            nextStep(){
                this.$refs.budgetSchedule.validate((valid) => {
                    if (valid) {
                        if(!this.budgetSchedule.publishTime && this.removeEmptyTime().length == 0){
                            this.$message({
                                type: 'warning',
                                message: '分时段投放请至少选择一个时间段'
                            })
                            return false
                        }
                        if(!this.budgetSchedule.bidAmount && this.budgetSchedule.clickCost < 0.01){
                            this.$message({
                                type: 'warning',
                                message: '请输入有效竞价金额，最低￥0.01'
                            })
                            return false
                        }
                        let item = [
                            {
                                created:true,//是否完成本步编辑
                                click:true,     //是否可点击
                                style:"li-created",//样式分为default/active/created
                                step:'3',
                                title:"预算和排期",
                                info:'',
                                icon:'el-icon-check'//图标分为√和>
                            }
                        ];
                        this.$store.commit('BUDGET_SCHEDULE',{data: this.budgetSchedule});
                        this.$store.commit('ADSTEP_LIST_CREATED', {item});
                        this.$store.commit('ACTIVE_STEP', {step:"4"});
                        if(!this.stepCreated){
                            this.$store.commit('CREATED_STEP', {step:"4"});
                            this.stepCreated = true;
                        }
                    } else {
                        return false
                    }
                })

            },
            //保存受众参数
            setParams(){
                return {
                    //name:this.editAudienceForm.name,
                    //type:"SAVED",
                    audiences:this.editAudienceForm.nameList.id?[{
                        id:this.editAudienceForm.nameList.id,
                        name:this.editAudienceForm.nameList.name
                    }]:[],
                    maxAge:this.editAudienceForm.age.end,
                    minAge:this.editAudienceForm.age.start,
                    gender:this.editAudienceForm.gender || null,
                    locales:this.editAudienceForm.language || [],
                    suggestions:this.editAudienceForm.position.include||[],
                    exclusedSuggestions:this.editAudienceForm.position.exclude||[],
                    connectionType:this.editAudienceForm.relationship || null,
                    pageConnections:this.editAudienceForm.checkHomePage||[],
                    places:this.editAudienceForm.addr.include||[],
                    exclusedPlaces:this.editAudienceForm.addr.exclude||[],
                    reach:null
                }
            },
            editAdGroup(){

                if(this.editAudienceForm.relationship && !this.editAudienceForm.checkHomePage.length){
                    this.$message({ type: 'error', message:'请选择主页'});
                    return;
                }else if(!this.editAudienceForm.relationship && this.editAudienceForm.checkHomePage.length){
                    this.$message({ type: 'error', message:'请关系类型'});
                    return;
                }
                
                let position = {};
                switch(this.adverLayout.device){
                    case "pc":
                    position = {
                       devicePlatforms: ["DESKTOP"]
                    }
                    break;
                    case "mb":
                    position = {
                       devicePlatforms: ["MOBILE"]
                    }
                    break;
                    default:
                    position = {
                       devicePlatforms: ["DESKTOP","MOBILE"]
                    }
                }

                let params = {
                    adGroupStatus: this.adGroupStatus,
                    target: this.target,
                    localId:this.localId,
                    platFormId:this.platFormId,
                    name:this.budgetSchedule.adsName,
                    savedAudience:this.setParams(),
                    budgetScheduling: {   //预算和排期
                        "budgetAmount": this.budgetSchedule.budgetLimit ||6.0,   //预算
                        "startTime": this.budgetSchedule.startTime,    //开始时间
                        "endTime": this.budgetSchedule.endTime,  //结束时间

                        "isAutoBid": this.budgetSchedule.bidAmount,  //是否自动竞价
                        "bidAmount": this.budgetSchedule.bidAmount?'':this.budgetSchedule.clickCost,   //自动竞价金额,非必传
                        
                        "isDailyDelivery": this.budgetSchedule.publishTime,    //是否全天投放
                        "timeQuantumList": this.budgetSchedule.timeQuantumList || [],  //投放时间段,非必传
                        
                    },
                    adPosition:position
                };

                //分时段投放
                if(!this.budgetSchedule.publishTime) {
                    let tLen = this.budgetSchedule.timeQuantumList.length;
                    let tArr = [];
                    for (let i=0;i<tLen;i++) {
                        this.budgetSchedule.timeQuantumList[i].days.length ? tArr.push(this.budgetSchedule.timeQuantumList[i]) : false;
                    }
                    params.budgetScheduling.timeQuantumList = tArr
                }

                if(!params.savedAudience.places.length){
                    this.$message({
                        type: 'error',
                        message: '请至少选择一个位置!'
                    });
                    return;
                }
                if(!params.name){
                    this.$message({
                        type: 'error',
                        message: '请输入广告组名称!'
                    });
                    return;
                }
                if(!this.budgetSchedule.bidAmount && this.budgetSchedule.clickCost <= 0) {
                    this.$message({
                        type: 'warning',
                        message: '请输入有效竞价金额，最低￥0.01'
                    })
                    return false
                }
                this.showLoading = true;
                let preload = JSON.stringify(params);

                this.$store.dispatch('editAdGroup',preload).then((res)=>{
                    this.showLoading = false;
                    if(res.data && res.data.success) {
                        this.$message({
                            type: 'success',
                            message: '修改广告组成功!'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        });
                    }
                })
            },
            goBack(){
                this.$router.go(-1)
            }
        },
        watch: {

            adverPlan() {
                this.budgetSchedule.optimizeWays = '';
                this.switchOptimizeWays()
            },
            /*budgetAmount() {
                this.budgetSchedule.clickCost = toDecimal2(this.budgetAmount.amountMedian)
            },*/
            'budgetSchedule.date'() {
                if(this.budgetSchedule.date[0]){
                    let start = this.budgetSchedule.date[0];
                    let end = this.budgetSchedule.date[1];
                    let year = start.getFullYear();
                    let month = (start.getMonth() + 1 < 10 ? '0' + (start.getMonth() + 1) : start.getMonth() + 1);
                    let day = start.getDate() < 10 ? '0' + start.getDate() : start.getDate();
                    start = year+'/'+month+'/'+day;
                    year = end.getFullYear();
                    month = (end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1);
                    day = end.getDate() < 10 ? '0' + end.getDate() : end.getDate();
                    end = year+'/'+month+'/'+day;
                    if(this.type == 'new') this.$store.commit('STEP_SCHEDULE',{data: start+'-'+end})

                };
                
            },
            'budgetSchedule.adsName'(){
                this.nowLength = 50 - charCodeLen(this.budgetSchedule.adsName);
                if(this.type == 'new') this.$store.commit('BUDGET_SCHEDULE',{data: this.budgetSchedule});
            },
            'budgetSchedule.bidAmount'() {
                let cost = this.budgetSchedule.bidAmount ? '自动' : '￥' + this.budgetSchedule.clickCost;
                this.$store.commit('STEP_CLICKCOST',{data: cost});
            }
        },
        created () {
            this.initTimeDivision();
            this.setDefaultSchedule();
            this.autoAdverName();

            
            
        },
        mounted () {
            //编辑
            if(this.type=='edit'){
                let params = {
                    localId:this.$route.query.localId,
                    platFormId:this.$route.query.platFormId
                };
                this.localId = this.$route.query.localId;
                this.platFormId = this.$route.query.platFormId
                this.$store.dispatch('getAdGroupById',params).then((res)=>{
                    if(res.data && res.data.data && res.data.data){
                        this.adGroupStatus = res.data.data.adGroupStatus;
                        this.target = res.data.data.target;

                        //受众
                        let content = res.data.data.savedAudience;
                        let budgetData = res.data.data.budgetScheduling;

                        this.editAudienceForm.age.start = content.minAge;
                        this.editAudienceForm.age.end = content.maxAge;
                        this.editAudienceForm.gender = content.gender?content.gender.toString():'';
                        this.editAudienceForm.language = content.locales || [];
                        this.editAudienceForm.position.include = content.suggestions || [];
                        this.editAudienceForm.position.exclude = content.exclusedSuggestions || [];
                        this.editAudienceForm.relationship = content.connectionType;
                        this.editAudienceForm.checkHomePage = content.pageConnections || [];
                        this.editAudienceForm.addr.include = content.places || [];
                        this.editAudienceForm.addr.exclude = content.excludePlaces || [];

                        //预算排期
                        this.budgetSchedule.date = [];
                        let d = new Date(budgetData.startTime);
                        let s = new Date(budgetData.endTime);
                        d.setDate(d.getDate());
                        this.budgetSchedule.startTime = d.getTime();
                        this.budgetSchedule.date.push(new Date(getDate(d)))
                        s.setDate(s.getDate());
                        this.budgetSchedule.endTime = s.getTime();
                        this.budgetSchedule.date.push(new Date(getDate(s)))
                        this.budgetSchedule.budgetLimit = budgetData.budgetAmount ||6.0;
                        this.budgetSchedule.bidAmount = budgetData.isAutoBid;
                        this.budgetSchedule.clickCost = budgetData.bidAmount;
                        this.budgetSchedule.publishTime = budgetData.isDailyDelivery;

                        if(!budgetData.isDailyDelivery){
                            let data = budgetData.timeQuantumList;
                            for (let i=0;i<data.length;i++) {
                                let start = data[i].start/60;
                                let end = data[i].end/60;
                                for(start;start<end;start++) {
                                    let hour = start;
                                    for(let j=0;i<data[i].days.length;j++) {
                                        let day = data[i].days[j];
                                        if(day != 0) {
                                            this.handleSelect(this.timeDivision[(day-1)*24+hour])
                                        } else {
                                            this.handleSelect(this.timeDivision[6*24+hour])
                                        }
                                    }
                                }
                            }
                        }
                        this.budgetSchedule.adsName = res.data.data.name || this.autoAdverName();
                    }
                }).then(()=>{  //主页列表
                    this.$store.dispatch('getHomePageList')
                    .then((ret)=>{
                        if(ret.data && ret.data.data && ret.data.data.length){
                            let list = ret.data.data;
                            for(let i=0;i<list.length;i++){
                                list[i].check = false;
                            }
                            if(this.editAudienceForm.checkHomePage && this.editAudienceForm.checkHomePage.length){
                                let arr = this.editAudienceForm.checkHomePage;
                                for(let i = 0; i < arr.length; i++){
                                    list.forEach((n)=>{
                                        if(n.id == arr[i].id){
                                            n.check = true;
                                        }
                                    })
                                }
                            }
                            this.$store.commit('HOMEPAGE_LIST',{item:list});
                        }
                    })
                })
            }

            this.budgetSchedule.clickCost = toDecimal2(this.budgetSchedule.clickCost); //this.budgetAmount.amountMedian
        }
    }
</script>

<style lang="scss" >
    .budget-schedule{
        box-sizing: border-box;
        color: #696969;
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .stringCount{
            box-sizing: border-box;
            position: relative;
            left: -28px;
            top: 0;
            padding-right: 7px;
            display: inline-block;
            width: 27px;
            height: 34px;
            text-align: right;
            vertical-align: top;
            line-height: 34px;
            color: #999;
            font-size: 12px;
        }
        .el-form-item.is-required .el-form-item__label{
            padding-right: 36px;
        }
        .el-form-item.is-required .el-form-item__label:after{
            content: '：';
            position: absolute;
            right: 11px;
            top:11px;
        }
        .el-form-item.is-required .el-form-item__label:before{
            position: absolute;
            right: 25px;
            top: 11px;
            margin: 0;
        }
        .el-form-item__label{
            position: relative;
        }
        .el-date-editor--daterange{
            margin-left: 0;
        }
        .lengthLimit input{
            padding-right: 30px;
        }
        input{
            height: 34px;
            border-color: #d5dfe4;
        }
        .bs-container{
            input{
                height: 28px;
            }
            .switch-btn-group{
                height: 28px;
                button{
                    width: 124px;
                    height: 24px;
                    padding-bottom: 0;
                    padding-top: 0;
                }
            }
        }
        .el-form-item{
            margin-bottom: 16px;
            .el-form-item{
                margin-bottom: 0;
            }
        }
        .color-red{
            color: #ff3526;
        }
        .el-date-editor.el-input.el-date-editor--date{
            width: 160px;
        }
        .el-date-editor.el-input.el-date-editor--time{
            width: 106px;
            margin-left: 8px;
        }
        .prepandSign{
            position: relative;
            input{
                padding-left: 26px;
            }
            &::before{
                 content: '￥';
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 26px;
                 height: 34px;
                 text-align: center;
                 text-indent: 2px;
                 font-size: 14px;
                 color: #666666;
                 line-height: 35px;
             }
        }
        .switch-btn-group{
            box-sizing: border-box;
            height: 34px;
            padding: 2px;
            background: #d5dfe4;
            border-radius: 34px;
            color: white;
            .el-button{
                width: 76px;
                height: 30px;
                padding: 5px 10px;
                border:none;
                color: inherit;
                border-radius: 30px!important;
                background-color: transparent;
                font-size: 14px;
            }
            .switch-avtive{
                color: #666;
                background-color:#fff;
            }
        }
        .advance-select{
            width: 248px;
        }
        .click-cost-wraper{
            margin-top: 8px;
            padding: 3px 8px 7px;
        }
        .click-cost{
            width: 160px;
        }
        .click-cost-label{
            display: inline-block;
            vertical-align: top;
        }
        .advance-setting{
            overflow:hidden;
            .bs-title{
                padding: 0 0 18px;
                .label{
                    display: inline-block;
                    width: 103px;
                    text-align: right;
                    padding-right: 12px;
                    font-size: 14px;
                    color: #48576a;
                }
            }
            .bs-container{
                padding-left: 115px;
            }
        }
        .time-division-wraper{
            display: inline-block;
            width: 322px;
            margin-top: 8px;
            padding: 12px 15px;
            border: 1px dashed #b0bec5;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .td-container{
            float: left;
            width: 241px;
            height: 210px;
            overflow: hidden;
            border-left: 1px solid #d5dfe4;
            border-bottom: 1px solid #d5dfe4;
        }
        .td-cell{
            float: left;
            width: 10px;
            height: 30px;
            background-color: #ffffff;
            box-sizing: border-box;
            border-top: 1px solid #d5dfe4;
            cursor: pointer;
            &:nth-child(3n){
                 border-right: 1px solid #d5dfe4;
             }
            &.active{
                 background-color: #0686f9;
                 border-right: 1px solid #d5dfe4;
             }
        }
        .td-weekDay{
            float: left;
            width: 42px;
            height: 204px;
            padding-right: 6px;
            color: #999;
            text-align: right;
            font-size: 12px;
            line-height: 30px;
        }
        .td-hours {
            padding-left: 48px;
            overflow: hidden;
        li{
            float: left;
            width: 30px;
            font-size: 12px;
            line-height: 20px;
        }
        }
        .td-everyday{
            overflow: hidden;
            width: 100%;
            color: #999;
            padding-top: 15px;
            span{
                padding-right: 6px;
                text-align: right;
            }
        }
        .td-everyday-con{
            float: left;
            width: 241px;
            height: 30px;
            overflow: hidden;
            border-left: 1px solid #d5dfe4;
            border-bottom: 1px solid #d5dfe4;
        }
        .td-everyday-label{
            float: left;
            width: 42px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
        }
        .form-item-tip{
            display: inline-block;
            vertical-align: top;
            height: 34px;
            line-height: 34px;
            color: #999;
            font-size: 12px;
        }
        .bidAmount-tip{
            vertical-align: middle;
        }
        .td-tips{
            color: #999;
            padding: 4px 0 0 10px;
            font-size: 12px;
            line-height: 24px;
        }
        .td-tips-icon{
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-left: 42px;
            border-radius: 3px;
            background-color: #0686f9;
            vertical-align: middle;
        }
        .bs-adsprefix{
            width: 420px;
            span{
                font-size: 12px;
                color: #a0a0a0;
            }
        }
        .bd-next-btn{
            width: 120px;
            height: 34px;
            border: none;
            border-radius: 34px;
            color: white;
            background-color: #ffb100;
        }
        .bd-next-btn:hover {
            background: #E59E00;
        }
    }


</style>